<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>算力信息</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }

    .s-tit {
      padding: 30px 30px;
    }

    .s-tit .pt {
      font-size: 16px;
      color: #333;
    }

    .nty {
      position: relative;
    }

    .nty .pp1 {
      color: #666;
      font-size: 14px;
    }

    .nty .s1 {
      font-weight: bold;
      color: #333;
    }

    .nty .m-tn {
      display: flex;
      width: 220px;
      position: absolute;
      top: -12px;
      left: 210px;
      z-index: 2;
    }

    .nty .sbtn {
      display: block;
      width: 82px;
      height: 33px;
      padding-bottom: 2px;
      margin-right: 20px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: 1px solid #0e9cf2;
      border-radius: 3px;
      cursor: pointer;
    }

    .nty .sbtn.buy-hash-btn {
      color: #fff;
      background: #0e9cf2;
      transition: .25s;
    }

    .nty .sbtn.buy-hash-btn:hover {
      background: #0476bb;
    }

    .nty .sbtn.sy-btn {
      color: #0e9cf2;
      background: #ffffff;
      border: 1px solid;
      transition: .25s;
    }

    .nty .sbtn.sy-btn:hover {
      color: #0476bb;
      border-color: #0476bb;
    }

    .ms-content {
      display: flex;
    }

    .ms-content .panel {
      width: 50%;
      padding: 12px 30px;
    }

    .ms-content .panel:nth-child(2n+1) {
      margin-right: 20px;
    }

    .h2z {
      position: relative;
      margin-bottom: 22px;
    }

    .h2z .s9 {
      color: #333;
      font-size: 18px;
    }

    .h2z .zp {
      font-size: 12px;
      position: absolute;
      top: 4px;
      right: -4px;
    }

    .h2z .zp .a1 {
      color: #0e9cf2;
    }

    .h2z .icors {
      color: #0e9cf2;
      font-size: 12px;
    }

    .dl {
      margin-bottom: 30px;
      display: flex;
    }

    .dt {
      width: 75px;
      font-size: 14px;
      line-height: 28px;
      color: #333;
    }

    .dd {
      flex: 1;
      height: 30px;
      border-radius: 100px;
      background: #eee;
      position: relative;
      overflow: hidden;
    }

    .dd::before {
      content: attr(data-th);
      color: #fff;
      position: absolute;
      top: 5px;
      left: 25px;
      z-index: 5;
    }

    .pz {
      border-radius: 100px;
      position: absolute;
      height: 100%;
      width: 0;
      background: #6fc0f2;
    }

    .dl.on .pz {
      background: #0e9cf2;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="hashInfo">
    <div class="main">
      <section class="panel s-tit mb20">
        <p class="mb20 pt">算力信息</p>
        <div class="nty">
          <p class="pp1">账户余额 ：<span class="s1">{{G.toThousandsRound(accountBalance)}} TH</span></p>
          <div class="m-tn">
            <button class="sbtn buy-hash-btn" @click="G.to('buyHash')">购买算力</button>
            <button class="sbtn sy-btn" @click="G.to('hashOrder')">算力订单</button>
          </div>
        </div>
      </section>

      <div class="ms-content">
        <section class="panel">
          <h2 class="h2z">
            <span class="s9">算力获得</span>
            <div class="zp">
              <a class="a1" href="javascript:;" @click="G.to('costCoreGet')">更多信息</a>
              <i class="iconfont icors icon-right"></i>
            </div>
          </h2>
          <dl class="dl on">
            <dt class="dt">{{getCurrentYearMonth}}</dt>
            <dd class="dd" :data-th="hashGet.THNumzp + 'TH'">
              <p class="pz" :style="'width:' + hashGet.jinduz + '%'"></p>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="dt">{{getPrevYearMonth}}</dt>
            <dd class="dd" :data-th="hashGet.THNumzp2 + 'TH'">
              <p class="pz" :style="'width:' + hashGet.jinduz2 + '%'"></p>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="dt">{{getBeforeYearMonth}}</dt>
            <dd class="dd" :data-th="hashGet.THNumzp3 + 'TH'">
              <p class="pz" :style="'width:' + hashGet.jinduz3 + '%'"></p>
            </dd>
          </dl>
        </section>

        <section class="panel">
          <h2 class="h2z">
            <span class="s9">算力使用</span>
            <div class="zp">
              <a class="a1" href="javascript:;" @click="G.to('costCoreUse')">更多信息</a>
              <i class="iconfont icors icon-right"></i>
            </div>
          </h2>

          <dl class="dl on">
            <dt class="dt">{{getCurrentYearMonth}}</dt>
            <dd class="dd" :data-th="hashUse.THNumzp + 'TH'">
              <p class="pz" :style="'width:' + hashUse.jinduz + '%'"></p>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="dt">{{getPrevYearMonth}}</dt>
            <dd class="dd" :data-th="hashUse.THNumzp2 + 'TH'">
              <p class="pz" :style="'width:' + hashUse.jinduz2 + '%'"></p>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="dt">{{getBeforeYearMonth}}</dt>
            <dd class="dd" :data-th="hashUse.THNumzp3 + 'TH'">
              <p class="pz" :style="'width:' + hashUse.jinduz3 + '%'"></p>
            </dd>
          </dl>

        </section>
      </div>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        accountBalance: 0,
        hashGet: {
          jinduz: 0,
          THNumzp: 0,

          jinduz2: 0,
          THNumzp2: 0,

          jinduz3: 0,
          THNumzp3: 0,
        },
        hashUse: {
          jinduz: 0,
          THNumzp: 0,

          jinduz2: 0,
          THNumzp2: 0,

          jinduz3: 0,
          THNumzp3: 0,
        },
      },
      methods: {
        init() {
          this.requestList()
        },
        fillZeroBefore(num) {
          return (num + '').replace(/^\d$/, '0$1')
        },

        // 提交数据
        requestList() {
          var realUrl = '/user/hashInfoData';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          // 立即提交
          axios.post(url, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                console.log(res.data.data)
                this.hashGet.jinduz = res.data.data.thisM
                this.hashGet.THNumzp = res.data.data.thisMonth
                this.hashGet.jinduz2 = res.data.data.lastM
                this.hashGet.THNumzp2 = res.data.data.lastMonth
                this.hashGet.jinduz3 = res.data.data.last2M
                this.hashGet.THNumzp3 = res.data.data.last2Month

                this.hashUse.jinduz = res.data.data.taskthisM
                this.hashUse.THNumzp = res.data.data.taskMonth
                this.hashUse.jinduz2 = res.data.data.tasklastM
                this.hashUse.THNumzp2 = res.data.data.taskLastMonth
                this.hashUse.jinduz3 = res.data.data.tasklast2M
                this.hashUse.THNumzp3 = res.data.data.taskLast2Month

                this.accountBalance = res.data.data.points
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

      },
      computed: {
        getCurrentYear() {
          return new Date().getFullYear()
        },
        getCurrentYearMonth() {
          return G.getFormatTime(Date.now()).slice(0, 7)
        },
        getPrevYearMonth() {
          var month = new Date().getMonth()
          return this.getCurrentYear + '-' + this.fillZeroBefore(month)
        },
        getBeforeYearMonth() {
          var month = new Date().getMonth() - 1
          return this.getCurrentYear + '-' + this.fillZeroBefore(month)
        },
      },
      mounted() {
        this.init();
      }
    })
  </script>
</body>

</html>